CSY1063Web DevelopmentWeek 2

Chris RaffertyChris.Rafferty@northampton.ac.uk

Learning Objectives

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home Page</title>
</head>
<body>
    <h1>Page Heading</h1>
    <p>Content</p>
</body>
</html>

HTML pt2

The browser showing the Heading tag and P tag

HTML pt3

CSS

CSS pt2

CSS pt3

An image with the HTML from last week, there are arrows pointing to the <link> tag, the relationship or rel attribute and then the href with a .css extension.
Link tag <link
The “rel” (relationship) tells The browser what type of File is being referenced
Name of the CSS file (should have a .css extension)

CSS file

CSS code

selector1 {
    property: value;
    property: value;
    property: value;
}

selector2 {
    property: value;
    property: value;
}
Selector is used to find one or more HTML element
One or more properties are applied to the selected elements
The CSS file can contain as many blocks as you like Each block is a selector and properties
Braces are important: Every block must have an opening and closing brace!

CSS example

h1 {
    color: red;
}

p {
    color: blue;
}
An image of the output of the code, the heading is red and the paragraph is blue, the css code has been applied to the html

CSS properties

h1 {
    color: red;
}

p {
    color: blue;
}
<body>
    <h1>Page Heading</h1>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
</body>
An image of the css code being applied to the html, the two paragraphs are blue while the header is red

CSS comments

p {
    background-color: darkblue;
    color: white;
    /* font-size: 50px; This wont be applied to the webpage */
}

Class name selector

Class name selector example

<body>
    <h1 class="myClass">Page Heading</h1>
    <p class="myClass">Paragraph 1</p>
    <p>Paragraph 2</p>
</body>
.myClass {
    color: green;
}
Notice that both elements with the class “myclass” are green
An image showing both elements with the class myClass having their colour change to green

Class name selector pt2

ID selector

ID selector example

<body>
    <h1>Page Heading</h1>
    <p id="myID">Paragraph 1</p>
    <p>Paragraph 2</p>
</body>
#myID {
    color: red;
}
You may only have one element with 
each ID
An image showing the paragraph element with the ID myID having it's colour change to red

Which should I use?

Combining selectors

Combining selectors pt2

<body>
    
    <section class="myForm">
        <h3>Form</h3>
        <input type="button" value="Button 1">
    </section>

    <input type="button" value="Button 2">

</body>
.myForm input {
    border-radius: 20px;
    border: 3px solid #666;
    box-shadow: 3px 3px 3px #000;
    margin-bottom: 10px;
    background-color: darkblue;
    padding: 10px;
    text-transform: uppercase;
    color: white;
}
Notice that only the button inside the element with the class myform has been styled
An image showing that only the button inside the myForm class was effected by the CSS the other button input was not

Combining selectors pt3

    <section class="myForm">
        <h3>Form</h3>
        <input type="button" value="Button 1">
        <section>
            <section>
                <section>
                    <section class="test">
                        <input type="button" value="Button 2">
                    </section>
                </section>
            </section>
        </section>
    </section>

    <input type="button" value="Button 3">
Notice that only the buttons inside the element with the class myform are styled, it doesn’t matter how nested the button is
An image showing both buttons nested in the class myForm have been effected, regardless for how nested the element is

Direct descendent

Direct descendent example

.myForm > input {
    border-radius: 20px;
    border: 3px solid #666;
    box-shadow: 3px 3px 3px #000;
    margin-bottom: 10px;
    background-color: darkblue;
    padding: 10px;
    text-transform: uppercase;
    color: white;
}
Notice that only the button on the first level is selected, this is because of the direct descendent >
An image showing that only the first button has been selected due to the direct descendent being used

Combining selectors pt4

Block and inline elements

Block and inline elements pt2

Block elements

Notice that the blue background goes all the way across the page
<p>My Paragraph!</p>
p {
    background-color: darkblue;
    color: white;
    display: block;
}
An image showing the paragraph has a blue background that stretches across the whole screen

Inline elements

Notice that the blue background only extends the width of the text
<p>My Paragraph!</p>
p {
    background-color: darkblue;
    color: white;
    display: inline;
}
An image showing the paragraph has a blue background that only extends to the width of the text

Block vs inline

Inline elements example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Home Page</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <p>My Paragraph 1</p>
    <p>My Paragraph 1</p>

</body>
</html>
p {
    background-color: darkblue;
    color: white;
    display: inline;
}
The elements appear on the same line
An image showing both p tags are now on the same line, this is because they are both set to inline

Block elements example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Home Page</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <p>My Paragraph 1</p>
    <p>My Paragraph 1</p>

</body>
</html>
p {
    background-color: darkblue;
    color: white;
    display: block;
}
The elements appear on the different lines
An image showing the p tags now appear on two separate lines, this is because they have been set to block instead of inline

Block vs inline size differences

Block elements size example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Home Page</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <p>My Paragraph 1</p>
    <p>My Paragraph 1</p>

</body>
</html>
p {
    background-color: darkblue;
    color: white;
    display: block;
    width: 150px;
}
The elements appear on the different lines and don’t span the entire width of the page
An image showing the p tags have fixed widths and appear on separate lines, this is allowed as the elements have been set to block

Inline elements size example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Home Page</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <p>My Paragraph 1</p>
    <p>My Paragraph 1</p>

</body>
</html>
p {
    background-color: darkblue;
    color: white;
    display: inline;
    width: 150px; /*no effect*/
}
Width has no effect on inline elements, both p tags stretch as wide as its content
An image showing the p tags both on the same line but the width only going as far as the content, this is because we cannot set a width on inline elements

Float

Float: left

Float: left example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Home Page</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <p>My Paragraph 1</p>
    <p>My Paragraph 1</p>

</body>
</html>
p {
    background-color: darkblue;
    color: white;
    display: block;
    width: 150px;
    float: left;
}
An image illustrating the two p tags with fixed widths are now on the same line, this is due to the float left property being applied to them

Float: left multiple elements

Float: left multiple elements example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Home Page</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>
    <p>Paragraph 4</p>
    <p>Paragraph 5</p>
    <p>Paragraph 6</p>
    <p>Paragraph 7</p>
</body>
</html>
p {
    background-color: darkblue;
    color: white;
    display: block;
    width: 150px;
    float: left;
}
An image showing seven p tags all on the same line using float, when the tags get to the edge of the screen they start a new line.

Float: right multiple elements example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Home Page</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>
    <p>Paragraph 4</p>
    <p>Paragraph 5</p>
    <p>Paragraph 6</p>
    <p>Paragraph 7</p>
</body>
</html>
Float: right stacks the elements from right to left
p {
    background-color: darkblue;
    color: white;
    display: block;
    width: 150px;
    float: right;
}
The p tags are now stacked from right to left using float: right

Float and background-color

<body>
    <section class="red">
        <p>Paragraph 1</p>
        <p>Paragraph 2</p>
        <p>Paragraph 3</p>
        <p>Paragraph 4</p>
        <p>Paragraph 5</p>
        <p>Paragraph 6</p>
        <p>Paragraph 7</p>
    </section>
</body>
As you expect, the paragraphs sit in the section with a red background
p {
    background-color: darkblue;
    color: white;
    display: block;
    width: 150px;
}

.red {
    background-color: red;
}
An image showing the p tags in a column with a red background

Float and background-colorissue

<body>
    <section class="red">
        <p>Paragraph 1</p>
        <p>Paragraph 2</p>
        <p>Paragraph 3</p>
        <p>Paragraph 4</p>
        <p>Paragraph 5</p>
        <p>Paragraph 6</p>
        <p>Paragraph 7</p>
    </section>
</body>
But when float:left is added the red background disappears!
p {
    background-color: darkblue;
    color: white;
    display: block;
    width: 150px;
    float: left;
}

.red {
    background-color: red;
}
An image showing the red background colour has disappeared, this is due to float left being applied to the tags

Float and background-colorfix

<body>
    <section class="red">
        <p>Paragraph 1</p>
        <p>Paragraph 2</p>
        <p>Paragraph 3</p>
        <p>Paragraph 4</p>
        <p>Paragraph 5</p>
        <p>Paragraph 6</p>
        <p>Paragraph 7</p>
    </section>
</body>
By adding overflow: auto, the background appears again
p {
    background-color: darkblue;
    color: white;
    display: block;
    width: 150px;
    float: left;
}

.red {
    background-color: red;
    overflow: auto;
}
An image showing the background colour has reappeared, this is because overflow: auto has been added to the red class

Exercise

Box model

Box model example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Home Page</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <section>Element 1</section>
    <section>Element 2</section>
</body>
</html>
section {
    background-color: darkblue;
    color: white;
}
An image showing two html elements, there is a blue background colour and there are no gaps between them, they are in a column

Margin

section {
    background-color: darkblue;
    color: white;
}
An image showing two html elements, there is a blue background colour and there are no gaps between them, they are in a column
section {
    background-color: darkblue;
    color: white;
    margin: 20px;
}
An image showing two html elements, there is a blue background colour and this time there is a 20px gap around each one, this is due to the margin: 20px property

Padding

section {
    background-color: darkblue;
    color: white;
}
An image showing two html elements, there is a blue background colour and there are no gaps between them, they are in a column
section {
    background-color: darkblue;
    color: white;
    padding: 20px;
}
An image showing two html elements, there is a blue background colour and this time there is a 20px gap around each one from inside the element, this is due to the padding: 20px property

Border

section {
    background-color: darkblue;
    color: white;
}
An image showing two html elements, there is a blue background colour and there are no gaps between them, they are in a column
section {
    background-color: darkblue;
    color: white;
    border: 20px solid red;
}
An image showing two html elements, there is a blue background colour and this time there is a 20px red border around each one, this is due to the border property

Margin, padding & border

section {
    background-color: darkblue;
    color: white;
}
An image showing two html elements, there is a blue background colour and there are no gaps between them, they are in a column
section {
    background-color: darkblue;
    color: white;
    margin: 20px;
    padding: 20px;
    border: 20px solid red;
}
An image showing two html elements, there is a blue background colour and margin, padding and border properties are being applied to them

*

* {
    margin: 0;
    padding: 0;
}
An image showing the default padding and margin for elements
An image showing the padding and margin of the elements being set to 0 through the * selector

CSS units

px

p {
    background-color: darkblue;
    color: white;
    padding: 5px;
}

h1 {
    background-color: darkred;
    color: white;
    padding: 5px;
}
    <h1>Heading</h1>
    <p>Paragraph</p>
An image showing a heading element with a dark red background with a padding of 5px around it along with a paragraph tag with a dark blue background

em

p {
    background-color: darkblue;
    color: white;
    padding: 1em;
}

h1 {
    background-color: darkred;
    color: white;
    padding: 1em;
}
    <h1>Heading</h1>
    <p>Paragraph</p>
An image showing the padding around the two elements has got much bigger due to changing the unit to em instead of px

There are many different units in CSS

CSS colours

CSS RGB

CSS RGB pt2

CSS RGB pt3

CSs RGB example

h1 {
    background-color: rgb(0, 255, 0);
    color: rgb(255, 0, 0);
}

CSS RGB colour picker

An image showing the built in colour picker in visual studio code

Hexadecimal

Hexadecimal table

1

1

2

2

3

3

4

4

5

5

6

6

7

7

8

8

9

9

10

A

11

B

12

C

13

D

14

E

15

F

16

10

17

11

Hexadecimal pt2

Hexadecimal pt3

Hexadecimal example

h1 {
    background-color: #00FF00;
    color: #FF0000;
}
An image of the visual studio colour picker now using hexadecimal values

Finding colour codes and colour combinations

Fonts

h1 {
    font-family: Verdana;
}

p {
    font-family: Arial;
}

Fonts pt2

Fonts pt3

Web fonts

Generating web fonts

Google fonts

Browser developer tools

Creating a layout

Semantic HTML

Semantic HTML example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Home Page</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <header>
        <h1>Heading</h1>
    </header>

    <nav>
        <ul>
            <li><a href="#">page 1</a></li>
            <li><a href="#">page 2</a></li>
            <li><a href="#">page 3</a></li>
        </ul>
    </nav>

    <main>
        <p>Lorem ipsum ...</p>
    </main>

    <aside>
        Right hand side
    </aside>

    <footer>
        &copy; Your name 2023
    </footer>
</body>
</html>
An image showing the html elements using the semantic tags, for example nav, main, footer etc

Adding colours to the semantic tags

header {
    background-color: blue;
    color: white;
    padding: 20px;
}

nav {
    background-color: yellow;
}

main {
    background-color: darkblue;
    color: white;
}

aside {
    background-color: lightgreen;
}

footer {
    background-color: darkgreen;
    color: white;
}
An image showing the HTML now has the colours being applied to it, the header is blue, the navigation is yellow, the main is dark blue, aside is light green and the footer is dark green

A quick caveat

display: grid

body {
    display: grid;
}

grid-area

grid-area example

header {
    background-color: blue;
    color: white;
    padding: 20px;
    grid-area: header;
}

nav {
    background-color: yellow;
    grid-area: nav;
}

main {
    background-color: darkblue;
    color: white;
    grid-area: main;
}

aside {
    background-color: lightgreen;
    grid-area: aside;
}

footer {
    background-color: darkgreen;
    color: white;
    grid-area: footer;
}

Columns

body {
    display: grid;
    grid-template-columns: 20% 60% 20%;
    grid-template-rows: auto;
}

Visualising the grid

A visual representation for how we want the website to look, the header spanning across all three columns, on the second row is the navigation, main and aside, then on the third row spanning all three columns is the footer

Creating the grid

body {
    display: grid;
    grid-template-columns: 20% 60% 20%;
    grid-template-rows: auto;
    grid-template-areas: 
        "header header header"
        "nav main aside"
        "footer footer footer"
    ;
}
An image showing the web page in the grid layout we created using the grid-template-areas property

Exercise pt2

An image of a different grid layout, this time it is a two column layout with four rows, the first row is the header which spans across both columns, then the next row is the navigation which spans across both columns, the third row has the main in the first column and then aside in the second, the last row has the footer which spans across both columns. The column widths are 80% 20%

Exercise pt3

  1. :
  2. :
An image of a different grid layout, this time it is a two column layout with three rows, the first row is the header which spans across both columns, then the next row is the navigation and the main, the third row has the footer which spans across both columns. The column widths are 20% 80%
An image of a different grid layout, this time it is a two column layout with four rows, the first row is the header which spans across both columns, then the next row is the navigation which spans across both columns, the third row has the main in the first column and then aside in the second they are both the same width, the last row has the footer which spans across both columns. The column widths are 50% 50%

Exercise pt4

  1. :
The last grid layout, its a three row gird, the first row has the header and navigation, the second row has the main and aside then the last row has the footer which spans across both columns. The column widths are 50% 25% 25%, the navigation takes up two columns while aside only uses one.

Exercise pt5

Exercise pt6

Examples Of Web Developer Portfolios